<!--宋文凯 单个充电桩状态-->
<!DOCTYPE html>
<html lang="en">
<head>
  <base href=""/>
  <meta charset="UTF-8">
  <title>充电桩单个状态</title>
  <link type="text/css" rel="stylesheet" href="../static/css/equipmentStatus.css"/>
  <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.min.css"/>
  
  <script type='text/javascript' src='../static/js/jquery-1.10.2.min.js'></script>
  <script type='text/javascript' src='../static/js/bootstrap.min.js'></script>
  <script type="text/javascript" src="../static/js/common.js"></script>
  <script type="text/javascript" src="../static/js/equipmentStatus.js"></script>
</head>
<body>
<div class="nav">
    <div class="left">
        <div class="charging_pile">
            <img src="../static/images/charging-pile02png.png" height="98" width="66"/>
        </div>
        <div id="equipmentName" class="word"></div>
        <div class="connectStatus">
          <h3><span id="connect" class="label label-primary" style="display:none;"><img src="../static/images/connect.png"/>&nbsp;链接</span></h3>
          <h3><span id="disconnect" class="label label-danger" style="display:none;"><img src="../static/images/disconnect.png"/>&nbsp;断开</span></h3>
        </div>
        <div class="Perches">
            <div class="chargeStatus">
                <h4 class="modal-title"><strong>桩状态</strong></h4>
                <p>
            </div>
        </div>
        <div class="connectStatus">
          <span id="chargingStatus" class="label" style="color:black;display:none;"><img src="../static/images/electricize.png"/>&nbsp;&nbsp;&nbsp;充电中</span>
          <span id="leisureStatus" class="label" style="color:black;display:none;"><img src="../static/images/leisure.png"/>&nbsp;&nbsp;&nbsp;空闲</span>
          <span id="faultStatus" class="label" style="color:black;display:none;"><img src="../static/images/breakdown.png"/>&nbsp;&nbsp;&nbsp;故障</span>
        </div>
    </div>
    <div class="content">
        <div class="top">
            <h4 class="ChargeDetails"  id="chargeTitle"><strong>充电详情</strong></h4>
            <p>
            <div class="form-group scrolll">
                <table class="table table-hover" id="chargeTable">
                    <thead>
                      <tr>
                          <th>车辆自编号</th>
                          <th>员工卡号</th>
                          <th>开始时间</th>
                          <!-- <th>结束时间</th> -->
                          <th>充电时长</th>
                          <th>实充SOC(%)</th>
                          <th>充电电量（度）</th>
                      </tr>
                    </thead>
                    <tbody id="chargeTbody">
                      <tr>
                          <td>-</td>
                          <td>-</td>
                          <td>-</td>
                          <!-- <td>-</td> -->
                          <td>-</td>
                          <td>-</td>
                          <td>-</td>
                      </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="bottom">
            <div class="StateDetails">
                <div class="StateMSG">充电桩状态详情</div>
            </div>
            <div id="charging" style="display:none;">
                <div class="details1">
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/electricity.png" height="123" width="122"/>
                            <span class="Iout">输出电流(A)</span>
                            <span class="price"><b id="outputelectric" class="word1">0.00</b>A</span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/pressure.png" height="123" width="122"/>
                            <span class="Iout">输出电压(V)</span>
                            <span class="price"><b id="outputVoltage" class="word2">0.00</b>V</span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/power.png" height="123" width="122"/>
                            <span class="Iout">输出功率(KW)</span>
                            <span class="price"><b id="outputPower" class="word3">0.00</b>KW</span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                </div>
                <div class="null"></div>
                <div class="details2">
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/soc.png" height="123" width="122"/>
                            <span class="Iout">当前SOC(%)</span>
                            <span class="price1"><b id="currentSOC" class="word4">0</b>%</span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/electric-quantity.png" height="123" width="122"/>
                            <span class="Iout">已充电量(KW·h)</span>
                            <span class="price"><b id="chargedElectricity" class="word5">0.00</b>KW·h</span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                    <div class="charge">
                        <div class="currentOutput">
                            <img class="IoutPNG" src="../static/images/time.png" height="123" width="122"/>
                            <span class="Iout">已充时间</span>
                            <span class="price"><b id="totalChargingDTTM" class="word6">0小时0分0秒</b></span>
                        </div>
                        <div class="lowerEdge"></div>
                    </div>
                </div>
            </div>
            <div id="leisure" style="display:none;">
              <div class="Free">
                  <div class="currentOutput1" id="IDle1">
                      <label>空闲</label>
                  </div>
                  <div class="lowerEdge"></div>
              </div>
            </div>
            <div id="fault" style="display:none;">
                <div class="Free">
                    <div class="currentOutput2" id="IDle2">
                        <label>故障</label>
                    </div>
                    <div class="currentOutput2" id="IDle3">
                                                                故障原因:连接断开
                    </div>
                    <div class="lowerEdge"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="Png">
            <img src="../static/images/battery04.png" height="80" width="64"/>
        </div>
        <div class="MSG">
            <label>电池信息</label>
        </div>
        <div class="striping">
            <div class="Word">
                <span>单体个数:<b id="totalVol" class="Color1">-</b>个</span>
            </div>
            <div class="Word">
                <span>最大单体电压:<b id="maxSingleVol" class="Color2">-</b>V</span>
            </div>
            <div class="Word">
                <span>最小单体电压:<b id="minSingleVol" class="Color1">-</b>V</span>
            </div>
            <div class="Word">
                <span>最大单体电压位置:<b id="maxSingleVolIndex" class="Color2">-</b></span>
            </div>
            <div class="Word">
                <span>最小单体电压位置:<b id="minSingleVolIndex" class="Color1">-</b></span>
            </div>
        </div>
        <div class="striping2">
            <div class="Png">
                <img src="../static/images/thermometer01.png" height="161" width="66"/>
            </div>
            <div class="MSG">
                <label>温度参数</label>
            </div>
        </div>
        <div class="Word">
            <span>模块个数:<b id="totalTemperature" class="Color1">-</b>个</span>
        </div>
        <div class="Word">
            <span>最高模块温度:<b id="maxTemperature" class="Color2">-</b>度</span>
        </div>
        <div class="Word">
            <span>最低模块温度:<b id="minTemperature" class="Color1">-</b>度</span>
        </div>
    </div>
</div>
</body>
</html>